import { useState, useEffect } from "react";
import { Modal, Alert, Form, Radio, Button, Input, Card, Switch, Row, Col, Space, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { MultipleSelectShop } from "./MultipleSelectShop.jsx";
import StockSyncModal from "../StockSyncModal";
import { skuSyncStockToStore, spuSyncStockToStore } from "./server.js";
const InventorySynchronizationModal = props => {
	const {
		modalProps = {},
		valueKey = "id",
		isSkuType,
		selectedKeys,
		multiple = true,
		extraQuery,
		defaultValue,
		checkAuthTime = false,
		onChange,
		onCancel
	} = props;
	const [form] = Form.useForm();
	const [storeName, setStoreName] = useState("");
	const [shopOptions, setShopOptions] = useState([]);
	const [visible, setVisible] = useState(false);

	const handleOk = async syncType => {
		console.log("syncType", syncType);
		setVisible(false);
		const shopOptionsMap = shopOptions.reduce((acc, cur) => {
			acc[cur[valueKey]] = {
				...cur,
				value: cur[valueKey],
				label: cur.storeName,
				id: cur.id
			};
			return acc;
		}, {});
		const values = form.getFieldValue(valueKey);
		const storeList = Array.from(values || []).map(id => shopOptionsMap[id]);
		const API_DATA = {
			ids: selectedKeys,
			storeId: storeList.map(item => item.id),
			syncType
		};
		// if (onChange) {
		// 	console.log("onChange");
		// 	// onChange && onChange(multiple ? storeList : storeList[0]);
		// }
		const { success, msg } = await (isSkuType ? skuSyncStockToStore(API_DATA) : spuSyncStockToStore(API_DATA));
		if (success) {
			message.success(msg);
			onCancel();
			fetchList();
		}
	};
	const handleSearch = () => {
		if (form.getFieldValue("storeName") === storeName) {
			return;
		}
		form.setFieldValue(valueKey, []);
		setStoreName(form.getFieldValue("storeName"));
	};
	return (
		<CommonModal
			title={{ title: modalProps?.title || "选择平台店铺" }}
			open={true}
			width={600}
			onCancel={onCancel}
			onOk={() => {
				setVisible(true);
			}}
		>
			<div style={{ overflow: "hidden auto", height: "60vh" }}>
				<CommonForm
					formProps={{
						form,
						initialValues: {
							[valueKey]: defaultValue || []
						}
					}}
					columns={[
						{
							block: (
								<Row gutter={14}>
									<Col flex="auto">
										<Form.Item name="storeName">
											<Input placeholder="请输入店铺" onPressEnter={handleSearch} />
										</Form.Item>
									</Col>
									<Col>
										<Space>
											<Button type="primary" onClick={handleSearch}>
												搜索
											</Button>
											<Button
												onClick={() => {
													console.log("重置");
													form.resetFields();
													setStoreName("");
												}}
												style={{ marginRight: 8 }}
											>
												重置
											</Button>
										</Space>
									</Col>
								</Row>
							)
						},
						{
							name: valueKey,
							slot: (
								<MultipleSelectShop
									valueKey={valueKey}
									isSkuType={isSkuType}
									selectedKeys={selectedKeys}
									storeName={storeName}
									extraQuery={extraQuery}
									multiple={multiple}
									onInit={setShopOptions}
									checkAuthTime={checkAuthTime}
								/>
							)
						}
					]}
				></CommonForm>
				{visible && <StockSyncModal ids={selectedKeys} syncStatus={1} onSelect={handleOk} onCancel={() => setVisible(false)} />}
			</div>
		</CommonModal>
	);
};
export default InventorySynchronizationModal;
